<template>
  <div class="music-wrap">
    <div>
      <table>
        <thead>
          <tr>
            <th>歌曲</th>
            <th>时长</th>
            <th>歌手</th>
            <th>播放</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in Mmusiclists" @click="music(item.musicName)" v-if="shows">
            <td>{{item.musicName}}</td>
            <td>{{item.timer}}</td>
            <td>{{item.people}}</td>
            <td class="el-icon-video-play"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pages">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="140"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shows:false,
      Mmusiclists:''
    };
  },
  methods: {
    music(id) {
      console.log(id);
      let roterdata = this.$router.resolve({path:'/music/detal',query:{id:id}})
      window.open(roterdata.href, '_blank');
    },
    handleCurrentChange(val){
      console.log(val);
      this.musicList(val)
    },
    musicList(val){
      let pno = 1
      this.$http.get('/musicall',{
        params:{
          pno:val || pno
        }
      }).then(res=>{
        console.log(res.data.data);
        this.Mmusiclists = res.data.data
        this.shows = true
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  
  created(){
    this.musicList()
  }
};
</script>

<style lang="scss" scoped>
.pages{
        width: 100%;
        text-align: center;
        margin-top:50px ;
    }
.music-wrap {
  width: 1200px;
  min-height: 600px;
  margin: 40px auto;
}
table {
  /* 去掉表格之间的空隙 */
  border-collapse: collapse;
}
thead th {
  width: 250px;
  height: 20px;
}
tbody td {
  padding: 30px 60px;
  font-size: 16px;
  width: 250px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
tbody tr:nth-child(2n) {
  background: #f4f4f4;
}
</style>
